
<template>
  <div class="pageDiv">
    <vue3VideoPlay v-bind="options" poster='https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg' class="videoPlay"/>
    <div class="mvDetailsMsg">
        <div class="cartoonFont">
            <span>{{getmvDetailData.artistName}}</span>
            <span> - </span>
            <span>{{getmvDetailData.name}}</span>
        </div>
        <div class="cartoontext">
            <span>{{getmvDetailData.playCount}}w播放量</span>
            <span>-----{{getmvDetailData.publishTime}}</span>
        </div>
        
    </div>
    <!-- <div class="likesCard">
        <h1 class="cartoonFont">更多视频</h1>
        <div v-for="item in getSimiMvData" :key="item.id">
            
        </div>
    </div> -->
  </div>
  <h1 class="cartoonFont title">更多视频</h1>
  <a-row class="likesCard">
       <a-col v-for="item in getSimiMvData" class="likesCol" :span="4" :key="item.id">
          <div class="imgDiv"  @click="goNewRouter(item.id)">
            <img :src="item.cover" class="simiImg" alt="">
          </div>
          <div class="textDiv">
              <span class="cartoontext">{{item.name}}</span>
              <span v-for="items in item.artists" :key="items.id">{{items.name}}/</span>
          </div>
       </a-col>
  </a-row>
</template>


<script lang="ts">
import { defineComponent, onMounted, onUpdated, reactive ,ref, watch} from "@vue/runtime-core";
import {mvDetailStore,VideoUrlStore,simiMvStore} from '../../store'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'

  export default defineComponent({
     name:"app",
      watch:{
            
          },
     setup(){
        // 接受路由传过来的参数
         const route = useRoute()
         let id = ref()
         id.value = route.query.id
        //  根据MVID寻找相应的MV详情页以及MV地址
        const getmvDetailStore = mvDetailStore()
        const getVideoUrlStore = VideoUrlStore()
        const getmvDetailData:any = ref([])
        const getVideoUrlData = ref()
        //获取相似MV地址
        const getSimiMvStore = simiMvStore()
        const getSimiMvData:any = ref([])
        let posterCover =ref()
           // 定义播放器属性
        const options = reactive({
             width: '80vw', //播放器高度
             height: '80vh', //播放器高度
             color: "#409eff", //主题色
             currentTime:60,
             poster:posterCover,// 封面
             speed:true, //关闭进度条拖动
             src: getVideoUrlData, //视频源
       
        })
          // 获取相似视频ID进行路由更新跳转
          const router = useRouter();
          function goNewRouter(mvid:any){
            router.push({path:'mvDetail',query:{id:mvid}})
            setTimeout(function () {
               window.location.reload();
               }, 100);
            // router.go(0)
          }
         
          async function getStore (){
            getmvDetailData.value = (await getmvDetailStore.fetch(id.value)).data.data
            getVideoUrlData.value = (await getVideoUrlStore.fetch(id.value)).data.data.url
            ////获取相似MV接口
            getSimiMvData.value = (await getSimiMvStore.fetch(id.value)).data.mvs
            posterCover.value = getmvDetailData.value.cover
            console.log(getSimiMvData.value)
         }
        
        //页面加载则调用接口拿值
        
        onMounted(async()=>{
            getStore()
            
        })
      return{
        options,
        id,
        getmvDetailData,
        getVideoUrlData,
        getSimiMvData,
        goNewRouter
      }
     }
  })
</script>

<style lang="less" scoped>
.mvDetailsMsg{
  margin-top: 1rem;
 
}

.title{
  margin-left: 12rem;
  margin-top: 2%;
}
.likesCard{
  margin-top: 2%;
  // background-color: aqua;
  margin-left: 12rem;
  margin-bottom: 4rem;
}
.simiImg{
  width: 280px;
  height: 160px;
  border: 1px solid black;
  border-radius: 8px;
}
.imgDiv :hover{
  cursor: pointer;
  border: 2px solid #5599FF;
}
.textDiv{
  span:hover{
    cursor: pointer;
    color: #5599FF;
  }
}
</style>
